import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker,Image ,Input} from '@tarojs/components'
import './Illness.css'
import { AtAvatar, AtList, AtListItem, AtInput, AtForm, AtButton, AtGrid,AtSearchBar,AtTag,AtTextarea } from "taro-ui"
import app from '../../main';
import reactMixin from 'react-mixin';
import myJs from './illnessJs.js'
import { emit } from 'cluster';


export default class Illness extends Component {

    config = {
        navigationBarTitleText: '病情表单'
    }
    
    constructor () { 
        super(...arguments); 
            this.state = this.getData();
    }

    handleChange (event) {
        this.setState({
            value: event.target.value
        })
    }

    //get 医院列表
    gethospital(){
        let me = this;
        let data = {
            inquiry_answer_id: this.state.inquiry_answer_id
        }
        app.get('web/myself/examineInquiryAnswers', data, function(res) {
            console.log("111",res)
            let arr = res.data.result
            let a = arr
            let b = a.last_time.substring(0,10)
            arr.last_time = b
            me.setState({
                arr:arr
            },()=>{
                if(arr.is_cure == '有'){
                    me.setState({
                        btnY:'color: #72d021; border: 1px solid #72d021; margin:5px 0 0 15px;',
                        btnN:'color: #cccccc; border: 1px solid #cccccc; margin:5px 0 0 15px;',
                        shifoujiuzhen:1
                    })
                }else{
                    me.setState({
                        btnN:'color: #72d021; border: 1px solid #72d021; margin:5px 0 0 15px;',
                        btnY:'color: #cccccc; border: 1px solid #cccccc; margin:5px 0 0 15px;',
                        shifoujiuzhen:0
                    })
                } 
            })
        })
    }

    showImg (image) {
        app.prviewImage(image,[image])
    }

    componentWillMount(){
        console.log(33);
        this.gethospital();
        this.getHealthArchive();
    }

    onFullScreenChange(e) {
        console.log(e);
        this.setState({
            fullScreen: e.detail.fullScreen
        })
    }

    getHealthArchive() {
        var me = this;
        app.get('web/healthArchives/detailByAnswerId', {inquiry_answer_id: me.state.inquiry_answer_id}, function(res) {
            if (res.data.status == 200) {
                me.setState({
                    health_archive: res.data.result
                })
            }
        })
    }


  render () {
    let jsonIllness = !app.isEmpty(this.state.arr.illness_images) ? JSON.parse(this.state.arr.illness_images) : [];
    let videos = !app.isEmpty(this.state.arr.eye_videoes) ? true : ''
    let eyeimage = !app.isEmpty(this.state.arr.eye_images) ? true : ''
    console.log('a',videos)

    return (
      <View className='QuicklyConsultation'>
        <View>
            <View class='pd1'>患者信息</View>
            <AtList>
                <AtListItem title='姓名' extraText={this.state.health_archive.name} />
                <AtListItem title='性别' extraText={this.state.health_archive.gender} />
                <AtListItem title='出生日期' extraText={this.state.health_archive.birthday} />
                <AtListItem title='患者关系' extraText={this.state.health_archive.relation} />
                <AtListItem title='手机号码' extraText={this.state.health_archive.phone} />
                <AtListItem title='居住城市' extraText={this.state.health_archive.province + this.state.health_archive.city} />
                <AtListItem title='婚姻状态' extraText={this.state.health_archive.marry_status} />
                <AtListItem title='职业' extraText={this.state.health_archive.profession} />
                <AtListItem title='既往病史' note={this.state.health_archive.current_illness} />
            </AtList>
        </View>

        <View class='pd1'>病情信息</View>
        <View className='emptyBox'/>

        
        <View className='color'>
            <View className='textBox'>
                <View style={this.state.style}>本次咨询的疾病是否去医院就诊过</View>
            </View> 
            <View className='btnBox'>
                <AtButton customStyle={this.state.btnY} size='small'>是</AtButton>
                <AtButton customStyle={this.state.btnN} size='small'>否</AtButton>
            </View>
        </View>

        <AtList style={this.state.btnY == 'color: #72d021; border: 1px solid #72d021; margin:5px 0 0 15px;' ? 'display:block' : 'display:none'}>
            <AtListItem extraText= {this.state.arr.last_time}  title='最后一次就诊日期' />     
            <AtListItem extraText= {this.state.arr.cure_hospital}  title='就诊的医院' />     
            <AtListItem extraText= {this.state.arr.cure_illness}  title='确认疾病' />     
        </AtList>

        <View className='questBox'>
            <View className='iconI'>     
                <Image style={this.state.iconI} src={this.state.i}/>
            </View>
            <Text style={this.state.title}>病情描述</Text>
            {/* <Text style='color:red; font-size: 16px; margin:0 0 0 10px;'>( 必须填写 )</Text> */}
            <View className='textareaBox' style={!this.state.fullScreen ? "display:block" : "display:none"}>
                <AtTextarea
                    value={this.state.arr.main_suit}
                    onChange={this.handleChange.bind(this)}
                    maxLength={500}
                    count={false}
                    disabled
                />
            </View>           
        </View>

        <View className='questBox'>
            <View className='iconI'>     
                <Image style={this.state.iconI} src={this.state.i}/>
            </View>
            <Text style={this.state.title}>眼睛照片</Text>
            {/* <View className='describe'>请严格根据操作指引拍摄双眼的照片</View> */}
            {eyeimage == '' || eyeimage == null
            ?
            null
            :
            <View className='row'> 
                {/*<View className='imgBox'>
                    <Image className='photo' src={app.getPath(this.state.arr.eye_images)} onClick={this.showImg.bind(this,app.getPath(this.state.arr.eye_images))}/>
                </View>*/}
                <View className='imgBox'>
                    <Image className='photo' src={app.getPath(this.state.arr.eye_images)} onClick={this.showImg.bind(this,this.state.arr.eye_images)}/>
                   
                </View>
            </View>}         
        </View>

        <View className='questBox'>
            <View className='iconI'>     
                <Image style={this.state.iconI} src={this.state.i}/>
            </View>
            <Text style={this.state.title}>眼睛视频</Text>
            {/* <View className='describe'>请严格根据操作指引拍摄双眼的视频</View> */}
            <View className='row'> 
                {videos == '' || videos == null
                ?
                null
                :
                <View className='imgBox'>
                    <Video           
                        className='photo1'
                        src={this.state.arr.eye_videoes}
                        controls={true}
                        autoplay={false}
                        initialTime='0'
                        loop={false}
                        muted={false}
                        onFullScreenChange={this.onFullScreenChange}
                    />
                </View>}
            </View> 
        </View>

        {
            jsonIllness == [] || jsonIllness == null
            ?
            null
            :
            <View className='questBox'>
                <View className='iconI'>     
                    <Image style={this.state.iconI} src={this.state.i}/>
                </View>
                <Text style={this.state.title}>资料</Text>
                <View className='describe'>上传化验单，检查片子，报告单，药品方等资料会有利于医生为您给出更加全面的建议</View>
                <View className='row'> 
                    {
                        jsonIllness.map((item) => {
                            return(
                                <View className='imgBox'>
                                    <Image className='photo' src={item} onClick={this.showImg.bind(this,item)}/>
                                </View>
                            )
                        })
                    }
                </View>  
            </View>
        }
        
        
      </View>
    )
  }
}
reactMixin.onClass(Illness,myJs);

